<template>
    <div>
        <van-row>
            <van-row>
                <van-swipe @change="onChange" height="250">
                    <van-swipe-item v-for="item in productinfo.pics" :key="item">
                        <van-image
                        width="100%"
                        height="100%"
						fit="cover"
                        :src="item"
                        />
                        <!-- fit="cover" -->
                    </van-swipe-item>
                    <template #indicator>
                        <div class="custom-indicator">
                        {{ current + 1 }}/{{productinfo.pics.length}}
                        </div>
                    </template>
                </van-swipe>
            </van-row>
            <van-row style="padding:8px">
                <van-cell value="已团250件" style="text-align:left">
                    <template #title>
                        <span class="custom-title" style="font-size:24px; color:red">￥{{productinfo.price}}</span>
                        <span style="font-size:14px;text-decoration:line-through">￥{{productinfo.mprice}}</span>
                    </template>
                </van-cell>
                <van-row span="24">
                    <van-row style="text-align:left;margin:5px">
                        {{productinfo.des}}
                    </van-row>
                   
                </van-row>
                <van-row>
                    <ptPlay @pintuan='pintuans'></ptPlay>
                </van-row>
                <van-row style="font-size:13px;text-align:center">
                    <van-row>
                        <van-col span="6" style="background-color:#f36906; height:2rem; line-height:2rem" >团购人数</van-col>
                        <van-col span="6" style="background-color:#f36906; height:2rem; line-height:2rem">2人团</van-col>
                        <van-col span="6" style="background-color:#f36906; height:2rem; line-height:2rem" >3人团</van-col>
                        <van-col span="6" style="background-color:#f36906; height:2rem; line-height:2rem">4人团</van-col>
                    </van-row>
                    <van-row style="border: 1px solid #f36906;">
                        <van-col span="6" style="height:2rem; line-height:2rem">团购价格</van-col>
                        <van-col span="6" style="height:2rem; line-height:2rem">12</van-col>
                        <van-col span="6" style="height:2rem; line-height:2rem">12</van-col>
                        <van-col span="6" style="height:2rem; line-height:2rem">12</van-col>
                    </van-row>
                </van-row>
            </van-row>
            
            
        </van-row>
        <van-row>
            <van-cell is-link @click="isShow">
                <template #title>
                    <van-row>
                        <van-col span="8" >
                            <van-icon name="apps-o"/>
                            <span>7天包退</span>
                        </van-col>
                        <van-col span="8">
                            <van-icon name="apps-o"/>
                            <span>包邮包换</span>
                        </van-col>
                        <van-col span="8">
                            <van-icon name="apps-o"/>
                            <span>保证真品</span>
                        </van-col>
                    </van-row>
                </template>
            </van-cell>
        </van-row>
        
        <van-row>
            <van-cell title="用户评价" is-link value="共多少条评价" to="index" style="text-align:left"/>
            <evaluation v-for="item in pinjia" :key="item.id" :pinjia="item"></evaluation>
        </van-row>

        <van-row style="text-align:left;margin:5px;font-size:12px;">
            商品详情
        </van-row>
         <van-row>
             <van-image
                width="100%"
                height="100%"
                fit="contain"
                v-for="item in productinfo.pics"
                :key="item"
                :src="item"
                />
        </van-row>
        <van-goods-action>
            <van-goods-action-icon icon="home-o" text="首页" to="/home"/>
            <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" @click="collectionPopup"/>
            <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
            <van-goods-action-button type="warning" text="单独购买" />
            <van-goods-action-button type="danger" text="拼团购买" @click="tg"/>
        </van-goods-action>

        <van-popup v-model="show" style="height:240px;border-radius:10px;width:300px" closeable>
            <pdTan></pdTan>
        </van-popup>

        <van-popup v-model="sp" position="bottom" :style="{ height: '50%' } " round>
            <van-row style="margin:2rem">
                <van-row style="margin-top:40px">
                    <van-col span="6">
                        <van-image
                        width="3rem"
                        height="3rem"
                        src="https://img.yzcdn.cn/vant/cat.jpeg"
                        />
                        
                    </van-col>
                    <van-col span="18" style="text-align:left; font-size:11px">
                        {{productinfo.des}}
                        <van-row style="text-align:left; color:red; font-size:14px">
                            {{proPrice}}
                        </van-row>
                    </van-col>
                </van-row>
                <van-row style="padding:0;margin:20px 0; font-size:14px">
                    <van-checkbox-group v-model="result" direction="horizontal">
                        <van-checkbox name="a">64G</van-checkbox>
                        <van-checkbox name="b">128G</van-checkbox>
                    </van-checkbox-group>
                </van-row>
                <van-row>
                   <van-col span="4" style="font-size:17px">数量：</van-col>
                   <van-col span="8">
                       <van-stepper v-model="num" min="1" max="20" />
                   </van-col>
                </van-row>
            </van-row>
            <van-row style="padding:0 40px">
                <van-button round type="primary" block size="small" style="margin-bottom:10px" @click="confirom" color="linear-gradient(to right, #ff6034, #ee0a24)" >确认</van-button>
                <van-button round type="default" block size="small" @click="cancel">取消</van-button>
            </van-row>
        </van-popup>
 
        <!-- <van-sku
        v-model="sp"
        /> -->
    </div>
</template>

<script>
    import pdTan from './pdTan';
    import ptPlay from './ptPlay';
    import evaluation from '../evaluation/evaluation';
    import {mapGetters,mapActions} from 'vuex';
    export default {
        name:"pd",
        data() {
            return {
                pinjia:[
                    {
                        id:1,
                        imgsrc:"https://img.yzcdn.cn/vant/cat.jpeg",
                        name:"afafg",
                        time:"2020-1-2",
                        dengji:1,
                        pinjiatext:"大弄刚弄晚安v弄恩公饿啊为非",
                        guige:"awgwg"
                    },
                    {
                        id:2,
                        imgsrc:"",
                        name:"afafg",
                        time:"2020-1-2",
                        dengji:4,
                        pinjiatext:"大弄刚弄晚安v弄恩公饿啊为非",
                        guige:"awgwg"
                    },
                    {
                        id:3,
                        imgsrc:"",
                        name:"afafg",
                        time:"2020-1-2",
                        dengji:2,
                        pinjiatext:"大弄刚弄晚安v弄恩公饿啊为非",
                        guige:"awgwg"
                    },
                    {
                        id:4,
                        imgsrc:"",
                        name:"afafg",
                        time:"2020-1-2",
                        dengji:3,
                        pinjiatext:"大弄刚弄晚安v弄恩公饿啊为非",
                        guige:"awgwg"
                    }
                ],
                images: [
                    'https://img.yzcdn.cn/vant/apple-1.jpg',
                    'https://img.yzcdn.cn/vant/apple-2.jpg',
                ],
                show:false,
                cop:false,
                sp:false,
                current: 0,
                sku: {
                    hide_stock:true
                },
                goods: {
                },
                result: ['a', 'b'],
                goodsId:1,
                messageConfig: {
                },
                pid : this.$route.params.shopId || 1,
                productinfo : "xxx",
                num : 1
            }
        },
        created(){
            this.$store.commit({
                type : 'selectById',
                formName : 'commodities',
                id : this.pid
            });
            // this.productinfo = pInfo[0];
            this.productinfo = this.$store.state.res[0];
            console.log(this.productinfo);
        },
        computed: {
            // ...mapGetters(['getProduct'])
            proPrice() {
                return this.productinfo.price*this.num
            }
        },
        methods : {
            isShow() {
                this.show = true;
            },
            collectionPopup() {
                this.$toast.success('收藏成功');
            },
            onBuyClicked() {

            },
            onAddCartClicked() {

            },
            tg() {
                this.sp = true
            },
            confirom() {
				console.log('aaa');
                this.sp = false
                this.$router.push({
                    name : 'ShopProcess',
                    params : {
                        id : this.pid,
                        num: this.num
                    }
                })
            },
            cancel(){
                this.sp = false
            },
            onChange(index) {
                this.current = index;
            },
            pintuans() {
                this.$router.push({
                    name : 'GroupDetail',
                    params : {
                        id : this.pid
                    }
                })
            }
            // ...mapActions(['getProducts'])
        },
        components: {
            "pdTan" : pdTan,
            "ptPlay" : ptPlay,
            "evaluation" : evaluation,
            
        }
    }
</script>

<style scoped>
    .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
</style>